Home:ALL Converter>Angular 10 Routing

Angular 10 Routing

Ask Time:2020-08-14T05:57:36         Author:user11343077

Json Formatter

I just generated a new angular project with the latest nrwl workspace. I did a simple login screen where you can sign in. Right now there is no validation, I just want to switch page on Button click. But my problem starts there.

The url is changing to localhost:4200/dashboard on button click. But my component is not rendered, with router-outlet everything works. I searched in the net and added everything what I had to do to my app-routing-module and ts. I think it is a small error but I could not find it.

they look like this:

App-Routing-Module:

  import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';
import {DashboardComponentComponent} from "../../../../libs/moniesta-dashboard/src/lib/dashboard-component/dashboard-component.component";

const routes: Routes = [
  {path: 'dashboard', component: DashboardComponentComponent}


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

App-Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { AppRoutingModule } from './app-routing.module';
import {MoniestaAuthorisationModule} from "@moniesta/moniesta-authorisation";
import {MoniestaDashboardModule} from "@moniesta/moniesta-dashboard";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbEvaIconsModule,
    AppRoutingModule,
    MoniestaAuthorisationModule,
  MoniestaDashboardModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Login-ts:

@Component({
  selector: 'moniesta-login-component',
  templateUrl: './login-component.component.html',
  styleUrls: ['./login-component.component.scss']
})
export class LoginComponentComponent implements OnInit {
  userName = new FormControl('');
  password = new FormControl('');
  constructor(
    private router: Router, private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
  }


  loginValidation(){
    this.router.navigate(['dashboard']);

  }

}

Author:user11343077,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/63403774/angular-10-routing
yy